import React, { createElement } from 'react';
import { classPrefix, BaseProp } from '../../variables';
import useInsertClass from '../../hooks/useInsertClass';

export interface SettersViewProp extends BaseProp{
  arrayValue?: [string];
  stringValue?: string;
  booleanValue?: boolean;
  colorValue?: string;
  functionValue?: () => {};
  numberValue?: number;
  radioGroupValue?: 'small' | 'normal' | 'big';
  SelectValue?: 'small' | 'normal' | 'big';
  SoltValue?: React.ReactNode;
  TextAreaValue?: string;
  VariableValue?: string;
}

function SettersView(props: SettersViewProp) {
  const {
    arrayValue = [],
    stringValue = '',
    booleanValue = '',
    colorValue = '',
    functionValue = () => '',
    numberValue = '',
    radioGroupValue = '',
    SelectValue = '',
    SoltValue = '',
    TextAreaValue = '',
    VariableValue = '',
    uiConfig = {},
    style = {},
    className = '',
    children = '',
  } = props;
  const insertClass = useInsertClass(uiConfig);
  const funCall = functionValue() as React.ReactNode;
  const compClass = [insertClass, `${classPrefix}-setters-view`, className].filter(t => t).join(' ');
  return (
    <div className={compClass} style={{padding: '10px', ...style}}>
      <div>arrayValue: <br />{arrayValue.join(',')}</div><hr />
      <div>stringValue: <br />{stringValue}</div><hr />
      <div>booleanValue: <br />{booleanValue.toString()}</div><hr />
      <div>colorValue: <br />{colorValue}</div><hr />
      <div>functionValue: <br />{funCall}</div><hr />
      <div>numberValue: <br />{numberValue}</div><hr />
      <div>radioGroupValue: <br />{radioGroupValue}</div><hr />
      <div>SelectValue: <br />{SelectValue}</div><hr />
      <div>SoltValue: <br />{SoltValue}</div><hr />
      <div>TextAreaValue: <br />{TextAreaValue}</div><hr />
      <div>VariableValue: <br />{VariableValue}</div><hr />
      <div>children: <br />{children}</div><hr />
    </div>
  );
};

SettersView.displayName = 'SettersView';
export default SettersView;

// "@types/react": "^16.14.24",
// "@types/react-dom": "^16.9.4",